<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>关键词列表·思通投研·让数据驱动投资价值!</title>
	<link href="${pageContext.request.contextPath }/img/webLogoIcon.png" rel="shortcut icon">
    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/font-awesome.css" rel="stylesheet">

    <link href="${pageContext.request.contextPath }/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/style.css" rel="stylesheet">
    

	<link href="${pageContext.request.contextPath }/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

    <!-- FooTable -->
    <link href="${pageContext.request.contextPath }/css/footable.core.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/datepicker3.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/mypage.css" rel="stylesheet">
    <style>
		.select2_demo_1{
			float: left;
			width: 120px;
			display: inline;
			margin-left: 10px;
		}
		.form-control{
			display: inline;
		}
		
		.col-sm-3{
			float:right;
			width: 560px;
		}
		.input-group{
			float:right;
			width: 240px;
			margin-left: 5px;
		}
	   td{
	        vertical-align:middle;
	    }
	    .main-content{
	    	width: 100%;
	    	min-height: calc(100vh - 300px);
	    	background: #fff;
	    	border-radius: 4px;
	    	padding: 20px;
	    	border:1px solid #e8e8e8;
	    }
	    .addkeywords::after{
	    	content: '';
	    	display: block;
	    	clear: both;
	    }
	    .addkeywords{
	    	width: 100%;
	    	border-bottom:1px solid #e8e8e8;
	    	padding-bottom:10px;
	    	
	    }
	    .addkeywords input{
	    	width: 300px;
	    	float: left;
	    }
	    .addkeywords button{
	    	margin-left:20px;
	    	float: left;
	    }
	    .key-content{
	    	width: 100%;
	    }
	    .key-content span{
	    display: inline-block;
	    padding: 0 8px;
	    line-height: 30px;
	    font-size: 14px;
	    border:1px solid #faad14; 
	    border-radius: 4px;
	    color: #5a5a5a;
	    margin: 10px 10px 0 0;
	    }
	     .key-content span i{
	     	color: #5a5a5a;
	     	margin-left: 5px;
	     	cursor: pointer;
	     }
	      .key-content span i:hover{
	      color: #faad14;
	      }
	      
	      .pages{
	      	width: 100%;
	      	min-height: 40px;
	      	margin-top: 20px;
	      	border-top:1px solid #e8e8e8;
	      }
	</style>
</head>
<body>
		<nav class="navbar-default navbar-static-side" role="navigation">
			<% request.setAttribute("LEFT", "setup"); %> <%@include file="left-factory.jsp"%> 
		</nav>
		
		<div id="page-wrapper" class="gray-bg">
			<div class="row border-bottom">
				<jsp:include page="head-factory.jsp" flush="true" />
			</div>
			
			<div class="row wrapper border-bottom white-bg page-heading">
				<div class="col-lg-9">
					<h2>关键词列表</h2>
					<ol class="breadcrumb">
						<li class="nav-main1"><a
							href="${pageContext.request.contextPath}/admin/tosystem_overview">主页</a>
						</li>
						<li class="nav-main2"><a id="navigation1" href="#">站点资源</a>
						</li>
						<li class="active"><a>关键词列表</a></li>
					</ol>
				</div>
			</div>

			<div class="wrapper wrapper-content animated fadeInRight">
			<!-- 内容开始 start-->
				<div class="row">
					<div class="col-lg-12 main-content">
						<div id="addkeywords" class="addkeywords form-group">
							<input type="text" class="form-control" id="add">
							<button class="btn btn-primary" onclick="add()">确认添加</button>
						</div>		
						<div id="key-content" class="key-content"> 
						<c:forEach items="${list.list}" var="screenWord">
							<span>${screenWord.key_words }<i class="fa fa-close" id="close" data-index="${screenWord.id }"></i></span>
						</c:forEach>
<!-- 							<span>观看坚持沙发垫卡萨付款1 <i class="fa fa-close"></i></span> -->
						</div>
						<c:if test="${list.pages>0}">
							<div class="box" id="box" ></div>
						</c:if>
					</div>
				</div>
				<!-- 内容开始 end-->
				<jsp:include page="footer.jsp" flush="true" />
			</div>
			
			
			
		</div>

		<!-- Mainly scripts -->
		<script src="${pageContext.request.contextPath }/js/jquery-2.1.1.js"></script>
		<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
		<script
			src="${pageContext.request.contextPath }/js/jquery.metisMenu.js"></script>
		<script
			src="${pageContext.request.contextPath }/js/jquery.slimscroll.min.js"></script>

		<!-- Custom and plugin javascript -->
		<script src="${pageContext.request.contextPath }/js/inspinia.js"></script>
		<script src="${pageContext.request.contextPath }/js/pace.min.js"></script>



		<!-- FooTable -->
		<script
			src="${pageContext.request.contextPath }/js/footable.all.min.js"></script>
		<script src="${pageContext.request.contextPath}/js/mypage.js"></script>

		<script
			src="${pageContext.request.contextPath }/js/plugins/toastr/toastr.min.js"></script>
		<!-- Sweet alert -->
		<script
			src="${pageContext.request.contextPath }/js/plugins/sweetalert/sweetalert.min.js"></script>

		<!-- Page-Level Scripts -->
		<script type="text/javascript">
// 		var json = "${json }";
// 		console.log(json)
// 		 var list = JSON.parse(json);
// 		console.log(list)
// 			var keyscontent = ''
// 			for(var i =0;i<100;i++){
// 				keyscontent +=
// 					'<span>关键词 '+i+'<i class="fa fa-close" id="close" data-index="'+i+'"></i></span>'
// 			}
// 			$("#key-content").html(keyscontent)

			function add(){
				var word = $("#add").val()
				if(!word){
					swal("关键词不能为空", "", "error");
					return;
				}else if(word.replace(/\s*/g,"").length == 0){
					swal("关键词不能为空", "", "error");
					return;
				}
	
				$.ajax({
                    url:"${pageContext.request.contextPath}/screen/add",
                    type:"post",
                    data:{
                    	word:word
                    },
                    success:function(res){
                        if (res.status == 200){
//                         	setTimeout(function(){ paging(1,'${list.pages }','${list.pageNum }'); }, 3000);
                            swal("添加成功", "", "success");
//                             alert("aaaaaaaaaaaa")
                            
                            setTimeout(function(){ location.reload() }, 2000);
                        }else if(res.status == 201){
                        	swal("添加失败", "该词语已存在", "error");
                        }
                    },
                    error:function(e){
                    	swal("失败", "", "error");
                    }
                })
			}

			$("#key-content").on("click","#close",function(){
				var seedid = $(this).attr("data-index")
// 				console.log(seedid)
				swal({
                title: "确定移除?",
//              text: "Your will not be able to recover this imaginary file!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                closeOnConfirm: false,     
                closeOnCancel: true },
                function (isConfirm) {
//                 		 alert("aaaa")
// 				$(this).parent().remove()
		 			$.ajax({
                        url:"${pageContext.request.contextPath}/screen/remove",
                        type:"post",
                        data:{
                        	id:seedid
                        },
                        success:function(res){
                            if (res.status == 200){
//                             	setTimeout(function(){ paging(1,'${list.pages }','${list.pageNum }'); }, 3000);
                                swal("移除成功", "", "success");
                                setTimeout(function(){ location.reload() }, 2000);
                            }
                        },
                        error:function(e){
                        	swal("失败", "", "error");
                        }
                    })
			 });
			})
		$(function(){
			paging(1,'${list.pages }','${list.pageNum }');
		});
		function paging(totalData,totalPage, pagenum) {
			$('#box').paging({
				initPageNo : pagenum, // 初始页码
				totalPages : totalPage, //总页数
				totalCount : '合计' + totalData + '条数据', // 条目总数
				slideSpeed : 600, // 缓动速度 单位毫秒
				jump : true, //是否支持跳转
				callback : function(page) {
					// 回调函数
				}
			});
		}
		</script>
</body>

</html>
